<template>
  <div>
    <el-card>
      <el-row>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>内容管理</el-breadcrumb-item>
          <el-breadcrumb-item>文章/视频评论</el-breadcrumb-item>
        </el-breadcrumb>
      </el-row>

      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="文章评论列表" name="first"></el-tab-pane>
        <el-tab-pane label="视频评论列表" name="sec"></el-tab-pane>
      </el-tabs>

      <el-row>
        <el-button size="small" icon="el-icon-refresh" @click="getCommentUsers">刷新</el-button>
        <el-button size="small" icon="el-icon-delete" @click="drupTopicResponse">删除</el-button>
        <!-- <el-button size="small" icon="el-icon-circle-check" @click="updateTopicResponse">审核通过</el-button> -->
        <el-button size="small" icon="el-icon-document-add" @click="addComment">回复导表</el-button>
        <el-button size="small" icon="el-icon-upload2" @click="zhiding(1)">置顶</el-button>
        <el-button size="small" icon="el-icon-download" @click="zhiding(0)">取消置顶</el-button>


        <el-input placeholder="请输入要搜索的ID" @input="typeData" v-model="topic_id" @clear="getCommentUsers"
          style="width: 243px;float: right;" clearable size="small">
          <el-button slot="append" @click="getCommentUsers" icon="el-icon-search"></el-button>
        </el-input>
      </el-row>

      <el-table :data="topicForums" height="640" style="width:100%;margin-top:8px;" :border="true" :stripe="true"
        :header-cell-style="{ background: '#409EFF', color: '#FFF' }" @selection-change="selectChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="回复编号" prop="commentId" width="100"></el-table-column>
        <el-table-column label="回复内容" prop="commentContent"></el-table-column>
        <el-table-column label="回复时间" prop="commentDate"></el-table-column>
        <el-table-column label="回复人Id" prop="userId" width="100"></el-table-column>
        <el-table-column label="楼中楼/正常回复" width="140">
          <template slot-scope="prop">
            <el-tag v-if="prop.row.parentId == '0'" size="mini" plain>正常回复</el-tag>
            <el-tag v-else size="mini" plain>楼中楼</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="是否置顶" width="100">
          <template slot-scope="prop">
            <el-tag v-if="prop.row.topping == 1" type="success" size="mini" plain>是</el-tag>
            <el-tag v-else-if="prop.row.topping == 0" type="warning" size="mini" plain>否</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="文章编号" prop="topicId" width="100"></el-table-column>
        <el-table-column label="文章名字" prop="topicName"></el-table-column>


      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page.sync="pageNumber" :page-sizes="[20, 40, 60, 80]" :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="totalCount"></el-pagination>
      <el-dialog title="文章回复导表" :visible.sync="addDialogVisible" width="30%">
        <el-form ref="formRef" :model="formData" class="send-dialog-form">
          <el-form-item prop="file" ref="uploadRef" label="导表">
            <el-upload class="upload-demo" action="aa" :on-remove="fileRemove" :on-change="fileChange"
              :auto-upload="false" name="file" accept=".xls" :limit="1" ref="addFile">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">*请上传xls文件</div>
            </el-upload>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="cancelBox">取消</el-button>
          <el-button type="primary" @click="submitComment">确 定</el-button>
        </span>
      </el-dialog>


    </el-card>
  </div>
</template>

<script>
import {
  getTopicComment,
  importComment,
  zhidingComment,
  delComment,

} from "../../network/content";

export default {
  data() {
    return {
      topicForums: [],
      pageSize: 20,
      pageNumber: 1,
      totalCount: 0,
      comment_ids: [],
      formData: {
        cover: ""
      },
      addDialogVisible: false,
      topic_id: "",

      activeName: 'first',
      commentFlag: 0,
    };
  },
  methods: {

    typeData() {
      if (!this.topic_id.replace(/[^\d^\.]+/g, "")) {
        return (this.topic_id = "");
      }
    },
    handleClick() {
      this.commentFlag = this.activeName == 'first' ? 0 : 1
      this.getCommentUsers()
    },

    // 置顶
    zhiding(status) {
      if (this.comment_ids.length < 1) {
        return this.$message.warning("请选择要置顶的回复");
      }
      let ids = "";
      for (let i = 0; i < this.comment_ids.length; i++) {
        if (this.comment_ids[i].parentId == 0) {
          if (i == this.comment_ids.length - 1) {
            ids += this.comment_ids[i].commentId;
          } else {
            ids += this.comment_ids[i].commentId + ",";
          }
        } else {
          return this.$message.error("楼中楼不能指定");
        }
      }

      zhidingComment({
        ids: ids,
        topping: status,
      })
        .then(res => {
          console.log(res);
          if (res.flag) {
            this.$message.success("操作成功！");
            this.getCommentUsers();
          } else {
            this.$message.warning("操作失败！");
          }
        })
        .catch(err => {
          console.log(err);
        });
    },

    addComment() {
      this.addDialogVisible = true;
    },
    submitComment() {
      let fd = new FormData();
      fd.append("file", this.formData.cover);
      importComment(fd).then(res => {
        console.log(res);
        if (res.flag) {
          this.getCommentUsers();
          this.cancelBox();
          this.$message.success("上传成功");
        } else {
          console.log(res);
          this.$message.error("上传失败");
        }
      });
    },
    cancelBox() {
      this.addDialogVisible = false;
      this.$refs.formRef.resetFields();
      this.$refs.addFile.clearFiles();
      this.formData = {
        cover: ""
      };
    },
    fileRemove(file, fileList) {
      this.$refs.addFile.clearFiles();
      this.formData = {
        cover: ""
      };
    },
    fileChange(file, fileList) {
      this.formData.cover = file.raw;
    },
    getCommentUsers() {
      getTopicComment({
        pageSize: this.pageSize,
        pageNumber: this.pageNumber,
        commentFlag: this.commentFlag,
        topicId: this.topic_id
      })
        .then(res => {
          console.log(res);
          this.topicForums = res.data.list;
          this.totalCount = res.data.total;
          console.log(this.topicForums);
        })
        .catch(err => {
          console.log(err);
        });
    },
    //每页条数改变
    handleSizeChange(val) {
      this.pageSize = val;
      this.getCommentUsers();
    },
    //页数改变
    handleCurrentChange(val) {
      this.pageNumber = val;
      this.getCommentUsers();
    },
    selectChange(val) {
      this.comment_ids = val;
      console.log(val);
    },
    //文章审核
    updateTopicResponse() {
      if (this.comment_ids.length < 1) {
        return this.$message.warning("请选择要审核通过回复");
      }
      let ids = "";
      let forum_ids = "";
      for (let i = 0; i < this.comment_ids.length; i++) {
        if (i == this.comment_ids.length - 1) {
          ids += this.comment_ids[i].comment_id;
          forum_ids += this.comment_ids[i].forum_id;
        } else {
          ids += this.comment_ids[i].comment_id + ",";
          forum_ids += this.comment_ids[i].forum_id + ",";
        }
      }
      updateTopicComment({
        comment_id: ids,
        forum_id: forum_ids,
        managerName: sessionStorage.manager_name
      })
        .then(res => {
          if (res.flag) {
            this.$message.success("审核通过");
            this.getCommentUsers();
          } else {
            this.$message.warning("审核失败请联系管理");
          }
        })
        .catch(err => {
          this.$message.warning("审核失败请联系管理");
          console.log(err);
        });
    },


    //删除回复
    drupTopicResponse() {
      if (this.comment_ids.length < 1) {
        return this.$message.warning("请选择要删的回复");
      }
      this.$confirm("此操作将永久删回复, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let ids = "";
          for (let i = 0; i < this.comment_ids.length; i++) {
            ids += this.comment_ids[i].commentId + ",";
          }
          console.log(ids);
          delComment({
            ids: ids,
          })
            .then(res => {
              if (res.flag) {
                this.$message.success("删除成功");
                this.getCommentUsers();
              } else {
                this.$message.warning("删除失败请联系管理");
              }
            })
            .catch(err => {
              this.$message.warning("删除失败请联系管理");
              console.log(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  },
  created() {
    this.getCommentUsers();
  }
};
</script>

<style scoped>
.el-card {
  position: relative;
}

.input-with-select {
  position: absolute;
  right: 20px;
  top: 34px;
}
</style>
